<template>
	<div class="base-content error">
		<div>
			<span class="error-code" style="color: red;">4</span>
			<span class="error-code" style="color: orange;">0</span>
			<span class="error-code" style="color: red;">4</span>
		</div>
		<div style="margin-top: 1em;">
			您所访问的页面不存在或无权访问，将在<span class="timer">{{time}}</span>秒后返回首页
		</div>
		<div style="margin-top: 1em;">
			您也可以点击<el-button type="text" @click="back">立即返回</el-button>
		</div>
	</div>
</template>

<script scoped>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		useRoute,
		useRouter,
	} from 'vue-router'
	export default {
		name: 'Error',
		setup() {
			let time = ref(10)
			let interval = null
			const router = useRouter();
			const back = () => {
				clearInterval(interval)
				router.replace('/')
			}
			onMounted(() => {
				interval = setInterval(() => {
					time.value--
					if (time.value <= 0) {
						back()
					}
				}, 1000)
			})
			return {
				time,
				back
			}
		}
	}
</script>

<style>
	.error {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.error-code {
		font-size: 5em;
		font-weight: bold;
	}

	.timer {
		font-weight: bold;
		margin: 0 .5em;
	}
</style>
